<template>
	<view>
		<view class="price f-l-c">
			<view class="f25" style="color: #999999;">本次结算需支付费用</view>
			<view class="fw f40">￥{{price}}</view>
		</view>

		<view class="item f-c-b">
			<view class="item-left f-c-c f30">
				<u-icon class="icon" name="zhifubao-circle-fill" color="#06B4FD" size='58'></u-icon>
				<text>支付宝支付</text>
			</view>
			<view class="item-right">
				<view @click="checked1=!checked1" :class="checked1?'tickIconTrue f-c-c':'tickIcon'">
					<u-icon size=30 color='#ffffff' v-show="checked1" name='checkmark'></u-icon>
				</view>
			</view>
		</view>

		<view class="item f-c-b">
			<view class="item-left f-c-c f30">
				<image src="../../static/my/icon_wxzf.png" mode="widthFix"></image>
				<text>微信支付</text>
			</view>
			<view class="item-right">
				<view @click="checked2=!checked2" :class="checked2?'tickIconTrue f-c-c':'tickIcon'">
					<u-icon size=30 color='#ffffff' v-show="checked2" name='checkmark'></u-icon>
				</view>
			</view>
		</view>

		<view class="item f-c-b">
			<view class="item-left f-c-c f30">
				<image src="../../static/my/icon_yl.png" mode="widthFix"></image>
				<text>银联支付</text>
			</view>
			<view class="item-right-Card cw">
				去绑定
			</view>
		</view>

		<view class="item f-c-b">
			<view class="item-left f-c-c f30">
				<u-icon class="icon" name="rmb-circle-fill
" color="#06B4FD" size='58'></u-icon>
				<text>分期付款</text>
			</view>
			<view class="item-right" style="color: #999999;">
				该功能暂未开放
			</view>
		</view>
		
		<view class="btn f-c-c cw" @click="$to(`../exchangeResult/exchangeResult?title=支付成功&money=${price}`)">
			确认支付
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: 0,
				checked1: false,
				checked2: false
			}
		},
		onLoad(e) {
			this.price = e.price
		},
		methods: {

		}
	}
</script>

<style>
	.price {
		margin: 100rpx;
	}

	.price view:nth-child(1) {
		margin-bottom: 10rpx;
	}

	.tickIcon,
	.tickIconTrue {
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #C0C0C0;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.tickIconTrue {
		border: 0;
		background-color: #2EE152;
	}

	.item {
		margin: 0 40rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.item-left .icon {
		margin-right: 20rpx;
	}

	.item-left image {
		width: 50rpx;
		margin-right: 25rpx;
	}

	.item-right-Card {
		background-color: #2D8EEF;
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
	}
	
	.btn{
		background-color: #FF8710;
		margin: 200rpx;
		padding: 20rpx;
		border-radius: 40rpx;
	}
</style>
